<template>
	<view class="pageBg">
		<view class="header">
			<image :src="originData.bgImage" style="height: 100%;width: 100%;" mode=""></image>
		</view>
		<view class="bottom">
			<view class="title">
				<text class="left">{{ originData.buyTitle }}</text>
				<text class="right">{{ originData.buyDesc }}</text>
			</view>
			<view class="form">
				<uni-forms ref="formRef" label-width="160rpx" :model="dynamicFormData">
					<template v-for="(item, index) in dynamicFormData.domains" :key="item.id">
						<uni-forms-item :name="['domains', index, 'filedValue']" :label="item.filedName"
							:rules="[{ 'required': !!item.required, errorMessage: `${item.filedName}必填` }]"
							:required="!!item.required" v-if="item.filedType === 'text'">
							<uni-easyinput v-model="dynamicFormData.domains[index].filedValue" :placeholder="item.filedPlaceHolder" />
						</uni-forms-item>
						<uni-forms-item :name="['domains', index, 'filedValue']" :label="item.filedName"
							:rules="[{ 'required': !!item.required, errorMessage: `${item.filedName}必填` }]"
							:required="!!item.required" v-else>
							<uni-datetime-picker type="datetime" return-type="string"
								v-model="dynamicFormData.domains[index].filedValue" />
						</uni-forms-item>
					</template>
				</uni-forms>
			</view>
			<button class="button" @click="handleSubmit">立即领取</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { shopDetail, submitShop } from '@/api/list.js'
const originData = ref({
	bgImage: '',
	buyTitle: '',
	buyDesc: ''
})
const shopId = ref('')
const formRef = ref(null)

const dynamicFormData = ref({
	// domains 字段下会有多个结果
	domains: []
})

const loadDetail = (id) => {
	shopDetail({ id }).then(res => {
		shopId.value = id
		dynamicFormData.value.domains = res.data.map(item => ({
			...item,
			filedValue: ''
		}))
	})
}
const handleSubmit = () => {
	formRef.value.validate((err, value) => {
		console.log(err, value);
		if (!err) {
			const params = dynamicFormData.value.domains.map(item => ({
				filedName: item.filedName,
				filedValue: item.filedValue,
				required: item.required
			}))
			submitShop({
				id: shopId.value,
				fileds: params
			}).then(res => {
				uni.showToast({
					title: '领取成功',
					icon: 'success',
				})
				uni.navigateBack({
					delta: 1
				})
			})
		}
	})
}
onMounted(() => {
	const instance = getCurrentInstance().proxy
	const eventChannel = instance.getOpenerEventChannel();

	eventChannel.on('acceptDataFromOpenerPage', function (res) {
		Object.keys(originData.value).forEach(key => {
			originData.value[key] = res.data[key]
		})
		loadDetail(res.data.id)
	})
})
</script>

<style lang="scss" scoped>
.pageBg {
	min-height: auto;
}

.header {
	width: 700rpx;
	height: 380rpx;
	background-color: #fff;
	margin: 80rpx 24rpx;
	border-radius: 58rpx;
	position: relative;
}

.bottom {
	position: relative;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	height: 750rpx;
	border-radius: 82rpx 82rpx 0 0;
	padding: 50rpx 20rpx;
	box-sizing: border-box;

	.title {
		display: flex;
		justify-content: space-around;
		align-items: baseline;

		.left {
			font-size: 48rpx;
		}

		.right {
			font-size: 28rpx;
			color: $brand-theme-color;
		}
	}

	.form {
		padding: 40rpx 40rpx 0;
	}

	.button {
		border-radius: 50rpx;
		width: 630rpx;
		color: #fff;
		background-color: $brand-theme-color;
	}
}
</style>
